<template>
  <div>
    <el-row>
      <mu-appbar title="创建礼品码记录" style="background-color:#409EFF">
        <mu-icon-button  icon="arrow_back_ios" slot="left" :to="{name: 'CodeMenu' }"/>
      </mu-appbar>
    </el-row>

    <div>
      <!-- <el-row>
        <el-col :xs="6" :sm="4" :md="3" :lg="3">
          创建者ID
        </el-col>
        <el-col :xs="18" :sm="20" :md="21" :lg="21">
          <el-input v-model="condition.createUid" size="mini" @blur="getCodeInfo"></el-input>
        </el-col>
      </el-row> -->
      <el-row style="margin-top:16px;">
        <el-col :xs="6" :sm="4" :md="3" :lg="3">
          礼品码
        </el-col>
        <el-col :xs="18" :sm="20" :md="21" :lg="21">
          <el-input v-model="condition.code" size="mini" @blur="getCodeInfo"></el-input>
        </el-col>
      </el-row>

      <el-row style="margin-top:16px;">
        <el-col :xs="6" :sm="4" :md="3" :lg="3">
          类型
        </el-col>
        <el-col :xs="18" :sm="20" :md="21" :lg="21">
          <el-select v-model="condition.used" placeholder="请选择" @change="getCodeInfo">
            <el-option
              v-for="item in codeTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>

    </div>

    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="useAccountId"
        label="使用者ID">
      </el-table-column>
      <el-table-column
        prop="ndot"
        label="金币数量">
        <template slot-scope="scope">
          <span>{{scope.row.ndot}}个</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="code"
        label="礼品码">
      </el-table-column>
      <el-table-column
        prop="codeType"
        label="礼品码状态">
        <template slot-scope="scope">
          <span v-if="scope.row.useAccountId === 0" style="color:green">未使用 </span>
          <span v-if="scope.row.useAccountId !== 0" style="color:red">已使用 </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="useTime"
        label="使用时间">
      </el-table-column>

      <el-table-column
        v-if="this.isAdmin || this.isGm"
        prop="createUid"
        label="创建者ID">
      </el-table-column>

      <el-table-column
        prop="createTime"
        label="创建时间">
      </el-table-column>
    </el-table>

    <el-row>
      <center>
        <el-pagination
          small
          layout="prev, pager, next"
          :total="condition.total"
          :page-size="condition.pageSize"
          :current-page="condition.currentPage"
          @current-change="handleCurrentChange">
        </el-pagination>
      </center>
    </el-row>

  </div>
</template>

<script>
  import moment from 'moment'
  export default {
    data () {
      return {
        condition: {
          code: '',
          used: '-1',
          currentPage: 1,
          pageSize: 20,
          total: 0,
          account: sessionStorage.getItem('account')
        },
        tableData: [],
        isAdmin: false,
        isGm: false,
        codeTypes: [{
          value: '-1',
          label: '全部'
        }, {
          value: '0',
          label: '未使用'
        }, {
          value: '1',
          label: '已使用'
        }]
      }
    },
    methods: {
      getCodeInfo () {
        if (this.condition.createUid === '') {
          this.condition.createUid = -1
        }
        let that = this
        this.$axios({
          method: 'get',
          url: '/api/CarrieroperatorService.getCodeInfo',
          params: this.condition
        })
        .then(function (resp) {
          if (that.condition.createUid === -1) {
            that.condition.createUid = ''
          }
          if (resp.data.status === 'success') {
            for (let item in resp.data.data) {
              resp.data.data[item].createTime = moment.utc(resp.data.data[item].createTime).zone(-8).format('YYYY-MM-DD HH:mm:ss')
              if (resp.data.data[item].useTime !== undefined && resp.data.data[item].useTime !== '') {
                resp.data.data[item].useTime = moment.utc(resp.data.data[item].useTime).zone(-8).format('YYYY-MM-DD HH:mm:ss')
              }
            }
            that.tableData = resp.data.data
            that.condition.total = resp.data.page.total
          } else {
            that.$message({
              showClose: true,
              message: resp.data.cause,
              type: 'warning'
            })
          }
        })
      },
      handleCurrentChange (val) {
        this.condition.currentPage = val
        this.getCodeInfo()
      }
    },
    mounted () {
      if (sessionStorage.getItem('role') === 'admin') {
        this.isAdmin = true
      }
      if (sessionStorage.getItem('role') === 'gm') {
        this.isGm = true
      }
      this.getCodeInfo()
    }
  }
</script>
